<template>
  <a-col :lg="colSize.lg" :md="colSize.md" :sm="colSize.sm" :xs="colSize.xs">
    <a-form-item label="联系人姓名:" name="name" >
      <a-input
        v-model:value="contact.name"
        placeholder="请输入联系人姓名"
        :maxlength="255"
        allow-clear

      />
    </a-form-item>
  </a-col>

  <a-col :lg="colSize.lg" :md="colSize.md" :sm="colSize.sm" :xs="colSize.xs">
    <a-form-item label="手机号:" name="telephone">
      <a-input
        v-model:value="contact.telephone"
        placeholder="请输入手机号"
        :maxlength="255"
        allow-clear
      />
    </a-form-item>
  </a-col>

  <a-col :lg="colSize.lg" :md="colSize.md" :sm="colSize.sm" :xs="colSize.xs">
    <a-form-item label="座机号:" name="landline"  >
      <a-input
        v-model:value="contact.landline"
        placeholder="请输入座机号"
        :maxlength="255"
        allow-clear
      />
    </a-form-item>
  </a-col>

  <a-col :lg="colSize.lg" :md="colSize.md" :sm="colSize.sm" :xs="colSize.xs">
    <a-form-item label="邮箱:" name="email">
      <a-input
        v-model:value="contact.email"
        placeholder="请输入邮箱"
        :maxlength="255"
        allow-clear
      />
    </a-form-item>
  </a-col>

  <a-col :lg="colSize.lg" :md="colSize.md" :sm="colSize.sm" :xs="colSize.xs">
    <a-form-item label="微信号:" name="wechat">
      <a-input
        v-model:value="contact.wechat"
        placeholder="请输入微信号"
        :maxlength="255"
        allow-clear
      />
    </a-form-item>
  </a-col>

  <!--    ToDO :可选可填-->
  <a-col :lg="colSize.lg" :md="colSize.md" :sm="colSize.sm" :xs="colSize.xs">
    <a-form-item label="职务:" name="jobTitle" >
            <MDictSelect
              v-model:value="contact.jobTitle"
              placeholder="请选择职务"
              dict="往来单位联系人职务"/>
<!--      <a-select :value='contact.jobTitle'-->
<!--                :show-search="true"-->
<!--                optionLabelProp='children'-->
<!--                placeholder="请选择或输入职务"-->
<!--                :not-found-content="null"-->
<!--                :show-arrow="false"-->
<!--                :filter-option="true"-->
<!--                :autoClearSearchValue="false"-->
<!--                @search="handleSearch"-->
<!--                @blur="handleBlur"-->
<!--                @change="handleChange">-->
<!--        <a-select-option v-for=" item in dictOption" :key="item"> {{ item }}</a-select-option>-->
<!--      </a-select>-->
    </a-form-item>
  </a-col>

  <a-col
    :lg="colSize.lg"
    :md="colSize.md"
    :sm="colSize.sm"
    :xs="colSize.xs"
  >
    <a-form-item label="地址" name="address">
      <div>
        <m-addr-edit
          :AddressEntityData="AddressEntityData"
          :AddressStatus="AddressStatus"
          AddressType="联系人"
          @addrChange="getChildData"
        ></m-addr-edit>
      </div>
    </a-form-item>

  </a-col>

</template>

<script>
import MContactEditMap from "./js/index.js"
import {onMounted} from "vue";
import MDictSelect from "@/components/MDict/dictSelect";
import MAddrEdit from "@/components/MAddrEdit/index.vue";
export default {
  name: "index.vue",
  props: {
    contactEntity: {
      type: Object
    },
    colSize: {
      type: Object,
      default: () => {
        return {
          lg: 7,
          md: 12,
          sm: 24,
          xs: 24,
        }
      }
    }
  },
  components: {MAddrEdit,MDictSelect},
  setup(props) {
    const {
      rulesRef,
      dictOption,
      handleSearch,
      handleChange,
      handleBlur,
      contact,
      getContact,
      AddressEntityData,
      AddressStatus,
      getChildData,
    } = MContactEditMap(props)

    // const { resetFields, validateContact, validateInfos } = useForm(contact, rulesRef);

    onMounted(() => {

    });


    return {
      rulesRef,
      dictOption,
      handleSearch,
      handleChange,
      handleBlur,
      getChildData,
      AddressEntityData,
      AddressStatus,
      contact,
      getContact
    }
  }
}
</script>

<style scoped>

</style>
